import React, { PureComponent, Component } from 'react';
import { connect } from 'dva';
import styles from './index.less'
import { verificationMode } from '../../utils/Enum'
import PropTypes from 'prop-types'
import { Icon, Button } from 'antd-mobile';
import common from '../../utils/common.less'
/**
 * 选择签署方式组件
 * @author 马羽
 * @time 2020-4-13
 */


@connect(({ signatureModel }) => ({ signatureModel }))
class SelectMethod extends Component {
    //对props校验
    static propTypes = {
        isShow: PropTypes.bool.isRequired, //判断是显示还是隐藏
        onClose: PropTypes.func,  //点击关闭的回调函数
        onAlipay: PropTypes.func,  //支付宝认证函数
        onSMS: PropTypes.func,  //短信认证函数
    }

    //判断是不是短信验证
    get isSMS() {
        return this.props.signatureModel.verificationMode === verificationMode.SMSVERIFICATION
    }

    render() {
        const { isShow, onClose } = this.props
        return (
            <>
                {
                    isShow ?
                        <div onClick={onClose ? onClose : null} className={common.mask}></div>
                        :
                        null
                }
                <div className={styles.container}
                    style={{
                        transform: `translateY(${isShow ? '0' : '350px'})`
                    }}
                >
                    <header className={styles.header}>
                        <div className={styles.text}>签署意愿验证</div>
                        <div onClick={onClose ? onClose : null} className={styles.iconWrapper}>
                            <Icon className={styles.close} size={'sm'} type="cross" />
                        </div>
                    </header>
                    <div className={styles.divider}></div>
                    <div className={styles.agree}>我已查阅并愿意签署本文件</div>
                    <div className={styles.methodsWrapper}>
                        <div className={styles.title}>验证方式</div>
                        <div className={styles.methods}>
                            {
                                this.isSMS ?
                                    '短信验证码'
                                    :
                                    '刷脸'
                            }
                            {/* <Icon size="xs" color="#99A0AA" type="right" /> */}
                        </div>
                    </div>
                    <footer className={styles.footer}>
                        <Button
                            className={styles.btn}
                            type="primary"
                            onClick={this.onSubmit}
                        >
                            立即签署
                        </Button>
                    </footer>
                </div>
            </>
        )
    }

    //对提交函数的装饰
    onSubmit = e => {
        const { onAlipay, onSMS } = this.props
        if(this.isSMS) {
            onSMS()
        } else {
            onAlipay()
        }
    }

    changeState = e => {
        const { dispatch } = this.props
        if(this.isSMS) {
            dispatch({
                type: 'signatureModel/setMask',
                payload: {
                    verificationMode: verificationMode.ALIPAYVERIFICATION
                }
            })
        } else {
            dispatch({
                type: 'signatureModel/setMask',
                payload: {
                    verificationMode: verificationMode.SMSVERIFICATION
                }
            })
        }
    }

}


export default SelectMethod